<template>
  <uni-nav-bar title="新增大客户账户调整" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package">
    <view class="space-between">
      <view>调整额度</view>
      <input class="uni-input" maxlength="10" placeholder="请输入调整金额" v-model="money" @input="inputeve" />
    </view>
    <view class="space-between lists" style="margin-top:10rpx">
      <view>大客户</view>
      <hpy-form-select :dataList="keyList" text="name" name="value" @change="consolu" :Text="keyName" state="admin"
        :icon='true' />
    </view>
  </view>
  <view class="package">
    <view style="margin-bottom: 10rpx;">备注</view>
    <textarea class="textarea" v-model="value" placeholder="请简单描述..." :auto-height='true'></textarea>
  </view>
  <view class="add" @click="BulletBox()">确认</view>
  <!-- 确认调整信息 -->
  <Adjust @submit="submit" ref="djust" :changeMoney="changeMoney" type='金额'></Adjust>
</template>

<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import { ref, nextTick } from 'vue';
  import Adjust from '@c/administrator/BulletBox/adjust.vue';
  import { toPublish } from '@mqtt';
  import { getCustomersList } from '@/gql/administrator';
  import { errorToast, showLoading, successToast } from '@/utils/prompt';
  import { getDriverID } from '@/stores/driverID';
  const admin_id = getDriverID();
  /**
   * 新增加注机存量调整
   * @param {String} keyName  大客户名称
   * @param {Number} keyId  大客户ID
   * @param {String} money  大客户调整金额
   * @param {String} value  调整备注
   * @param {Null} djust  确认调整信息弹框
   * @param {Object} changeMoney  确认调整信息
   */
  const keyName = ref('请选择大客户'); //加注机名称
  const keyId = ref();//大客户ID
  const keyList = ref([]); // 大客户列表
  const value = ref('')
  const djust = ref(null)
  const money = ref('')
  const changeMoney = ref({})
  /**
   * 切换大客户ID
   * @param {String} e.data.name  大客户名称
   * @param {Number} e.data.id  大客户ID
   * @param {String} e.data.amount  大客户金额
   */
  function consolu(e : any) {
    console.log(JSON.stringify(e))
    keyName.value = e.data.name;
    keyId.value = e.data.id;
    changeMoney.value.money = e.data.amount;
  }
  //大客户列表
  KeyAll()
  function KeyAll() {
    showLoading('正在加载');
    const payload = {
      query: getCustomersList
    };
    toPublish('ql/control/getCustomersList', payload, (obj : any) => {
      uni.hideLoading();
      const { data } = obj;
      keyList.value = data.getCustomersList;
    });
  }
  /**
   * 输入调整金额
   */
  function inputeve(e : any) {
    let val = e.detail.value.replace(/(^\s*)|(\s*$)/g, '');
    if (!val) {
      money.value = '';
      return;
    }
    val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
    nextTick(function () {
      money.value = val;
    });
  }
  /**
   * 提交调整数据
   */
  function submit() {
    showLoading()
    const payload = {
      admin_id,
      customers_id: Number(keyId.value),
      money: money.value,
      remarks: value.value
    };
    toPublish(
      'control/addBillQuotaMoney',
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { code, msg } = obj;
        if (code === 1) {
          successToast(msg)
          navBack()
        } else {
          errorToast(msg)
        }
      }
    );
  }
  /**
   * 弹出确认调整前后数据弹框
   */
  function BulletBox() {
    if (!money.value) {
      errorToast('请输入调整金额')
      return
    }
    if (!keyId.value) {
      errorToast('请选择大客户')
      return
    }
    changeMoney.value.price = money.value
    const a1 = Number(changeMoney.value.money) + Number(money.value);
    changeMoney.value.total = Number((a1).toFixed(2));
    djust.value.openBankPad()
  }
</script>

<style scoped lang="less">
  .add {
    width: 480rpx;
    height: 100rpx;
    background: linear-gradient(-10deg, #2C96F9, #1B91FF);
    border-radius: 5px;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    margin: 60rpx auto 20rpx;
    font-size: 32rpx;
  }

  input {
    text-align: right;
  }
</style>
<style>
  .lists>>>.select-picker {
    justify-content: flex-end;
    text-align: right;
  }
</style>